<template>
  <div class="content">
    <div class="left">
      <div class="goback" @click="goback">
        <img src="../../assets/images/home/返回 (2).png" alt="" />
        <p class="font18 fw400">{{ t("作品库") }}</p>
      </div>
    </div>
    <div class="right">
      <h3
        class="font22"
        style="
          margin-bottom: 38px;

          font-size: 22px;
          color: #222222;
        "
      >
        {{ t("选中不同机种") }}
      </h3>
      <ul class="ptb10">
        <li
          v-for="item in typeList"
          :key="item.id"
          @click="item_click(item)"
          :class="show == item.id ? 'active' : ''"
        >
          <img :src="item.image | imgSrc" alt="" />
          <p class="font16 fw400 tcenter ptb10">{{ item.name }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getGoodsModelFirst } from "@/utils/api";
export default {
  components: {},
  data() {
    //这里存放数据
    return {
      typeList: [
        // {
        //     id: 1,
        //     img: "",
        //     title: "iPhone"
        // }, {
        //     id: 2,
        //     img: "",
        //     title: "AirTag"
        // }, {
        //     id: 3,
        //     img: "",
        //     title: "iPad"
        // }, {
        //     id: 4,
        //     img: "",
        //     title: "Macbook"
        // }, {
        //     id: 5,
        //     img: "",
        //     title: "Android"
        // }
      ],
      show: 1,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    /**
     * 简化翻译方法(少写property)
     * @param {String} v 最后一个key值
     */
    t(v) {
      return this.$t(`作品库.${v}`);
    },
    item_click(item) {
      this.show = item.id;
      this.$router.push({
        name: "worksMaketwo",
        query: {
          goods_model_id: item.id,
        },
      });
    },
    goback() {
      this.$router.push("worksLibrary");
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    getGoodsModelFirst().then((res) => {
      if (res.code == 1) {
        this.typeList = res.data;
      }
    });
  },
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="less" scoped>
.content {
  margin: 20px 105px 0px;
  display: flex;

  .left {
    width: 400px;

    .goback {
      display: inline-flex;
      align-items: center;
      cursor: pointer;
      user-select: none;

      img {
        width: 16px;
        height: 16px;
      }
    }
  }

  .right {
    width: 1000px;

    ul {
      display: flex;
      flex-flow: row wrap;

      li {
        width: 300px;
        height: 300px;
        background: #ffffff;
        border: 1px solid #000000;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        img {
          width: 123px;
          height: 171px;
          margin-bottom: 10px;
          object-fit: scale-down;
        }
      }

      .active {
        background: rgba(255, 87, 87, 0.08);
        border: 1px solid #ff5757;
      }
    }
  }
}
</style>
